<template>
  <div class="home-module-container">
    <el-form :model="moduleForm" label-position="right" label-width="82px">
      <el-form-item label="请选择模块" size="small" prop="layoutNum">
        <el-select v-model="moduleForm.homeModuleType" class="width240" popper-class="global-select-down">
          <el-option
            v-for="item in moduleTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <img v-if="moduleForm.homeModuleType === HOME_ITEM_TYPE.USERINFO" :src="moduleForm.isPc ? userInfoImg : mobileUserInfoImg" :style="moduleForm.isPc?'':'width:400px;height:116px;'" class="userinfo-img" alt="用户信息">
    <img v-if="moduleForm.homeModuleType === HOME_ITEM_TYPE.TO_DO" :src="todoImg" class="todo-img" alt="待办通知">
    <img v-if="moduleForm.homeModuleType === HOME_ITEM_TYPE.QUICK_ENTRY" :src="moduleForm.isPc ? entryImg : mobileEntryImg" :style="moduleForm.isPc?'':'width:400px;height:266px;'" class="entry-img" alt="快捷入口">
    <img v-if="moduleForm.homeModuleType === HOME_ITEM_TYPE.PLATFORM" :src="notifyImg" class="notify-img" alt="平台公告">
    <el-form :model="moduleForm" label-position="right" label-width="82px">
      <el-form-item v-if="[1, 3].includes(moduleForm.homeModuleType)" label="样式设置" size="small" prop="layoutNum">
        <el-radio v-model="moduleForm.isPc" :label="1">PC端</el-radio>
        <el-radio v-model="moduleForm.isPc" :label="0">移动端</el-radio>
      </el-form-item>
      <el-form-item v-if="[2,3,4].includes(moduleForm.homeModuleType)" label="模块名称" size="small" prop="layoutNum">
        <div class="common-border">
          <span class="list-item-label">字体大小</span>
          <el-select
            v-model="moduleForm.fontSize"
            style="width:'56px'"
            size="mini"
            class="small-select normal"
            placeholder="请选择">
            <el-option
              v-for="i in fontSizeOptions"
              :key="i"
              :label="i"
              :value="i" />
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <fixed-pagination>
      <div class="center">
        <el-button :loading="saveLoading" type="primary" size="small" @click="toSubmit">保存</el-button>
        <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { createChartTable, editChartTable } from '@/api/reportManage';
import { HOME_ITEM_TYPE } from '@/utils/const/echarts';
import userInfoImg from '@/assets/reportManage/userinfo_card.png';
import mobileUserInfoImg from '@/assets/reportManage/userinfo_card_mobile.png';
import entryImg from '@/assets/reportManage/entry_card.png';
import mobileEntryImg from '@/assets/reportManage/entry_card_mobile.png';
import todoImg from '@/assets/reportManage/todo_card.png';
import notifyImg from '@/assets/reportManage/notify_card.png';
export default {
  components: {},
  props: {
    tabId: {
      type: String | Number,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userInfoImg,
      mobileUserInfoImg,
      entryImg,
      mobileEntryImg,
      todoImg,
      notifyImg,
      HOME_ITEM_TYPE,
      moduleForm: {
        homeModuleType: HOME_ITEM_TYPE.USERINFO,
        isPc: 1,
        fontSize: 14,
        styleConfig: ''
      },
      active: 0,
      saveLoading: false,
      fontSizeOptions: [12, 13, 14, 16, 20, 28, 36, 48, 72],
      defaultData: null
    };
  },
  computed: {
    moduleTypeList() {
      return [
        { id: HOME_ITEM_TYPE.USERINFO, name: '用户信息' },
        { id: HOME_ITEM_TYPE.TO_DO, name: '待办通知' },
        { id: HOME_ITEM_TYPE.QUICK_ENTRY, name: '快捷入口' },
        { id: HOME_ITEM_TYPE.PLATFORM, name: '平台公告' }
      ];
    },
    defaultLayout() {
      const isUserInfoCard = this.moduleForm.homeModuleType === HOME_ITEM_TYPE.USERINFO;
      return isUserInfoCard ? { x: 0, y: 0, w: 7, h: 9 } : { x: 0, y: 0, w: 11, h: 10 };
    }
  },
  mounted() {
    this.defaultData = JSON.parse(JSON.stringify(this.moduleForm));
  },
  methods: {
    setDefault(data) {
      if (data.homeModuleType) {
        this.moduleForm = data;
        this.$set(this.moduleForm, 'fontSize', JSON.parse(data.styleConfig).fontSize);
      }
    },
    isDataChange() {
      return JSON.stringify(this.moduleForm) !== JSON.stringify(this.defaultData);
    },
    toSubmit() {
      this.moduleForm.styleConfig = JSON.stringify({ fontSize: this.moduleForm.fontSize });
      const dataForm = this.moduleForm;
      dataForm.tabId = this.tabId;
      dataForm.kind = 6;
      dataForm.isMobile = this.$route.query.editMobileMode ? 1 : 0;
      dataForm.name = dataForm.name || '';
      if (!this.isEdit || this.editType === 'copy') {
        dataForm.layout = JSON.stringify(this.defaultLayout);
        this.add(dataForm);
      } else {
        this.edit(dataForm);
      }
    },
    add(dataForm) {
      this.saveLoading = true;
      createChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
        this.saveLoading = false;
      }).catch(_ => {
        this.saveLoading = false;
      });
    },
    edit(dataForm) {
      this.saveLoading = true;
      dataForm.id = this.$route.params.id || '';
      editChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
        this.saveLoading = false;
      }).catch(_ => {
        this.saveLoading = false;
      });
    },
    handleClose() {
      this.$emit('goBack');
    },
    handleSelectUI(val) {
      console.log(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.foot-info {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  .item {
    flex-shrink: 0;
    margin-left: 10px;
    color: #999;
  }
}
.home-module-container {
  margin-top: 16px;
  .userinfo-img {
    width: 400px;
    height: 214px;
  }
  .todo-img {
    width: 400px;
    height: 325px;
  }
  .entry-img {
    width: 698px;
    height: 304px;
  }
  .notify-img {
    width: 424px;
    height: 328px;
  }
}
.common-border {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  width: 240px;
  .list-item-label {
    font-size: 14px;
    margin-right: 6px;
    color: #666;
    flex-shrink: 0;
  }
  .small-select {
    width: 42px !important;
    &.normal {
      width: 120px !important;
    }
    .el-input {
      height: 20px;
      line-height: 20px;
      .el-input__suffix {
        right: 0;
      }
      .el-select__caret {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
      }
    }
    .el-input__inner {
      height: 20px;
      border-radius: 2px;
      line-height: 20px;
      padding-right: 14px;
    }
    &::v-deep {
      .el-input__inner{
        width: 100% ;
      }
    }
  }
}
</style>
